<template>
	<view class="edit-address">
		<view>
			<view class="input-box">
				<view class="section">
					<text>收 货 人</text>
					<input v-model="recipientName" type="text" maxlength="20" class="input" placeholder="请输入收件人名称">

				</view>

				<view class="section">
					<text>手机号码</text>
					<input v-model="recipientPhone" type="number" maxlength="11" class="input" placeholder="请输入联系手机号">

				</view>
				<!-- 			<view class="item">
				<view class="text">所在地区</view>
				<view class="text-arrow">
					<view v-if="province" class="area-text" @tap="showPicker=true">{{ province }} {{ city }} {{ area }}
					</view>
					<view v-else class="placeholder-text" @tap="showPicker=true">选择地区</view>
					<address-picker v-if="showPicker" :show-picker="showPicker" :addr-ids="addrIds" @setAddressInfo="addressPickerConfirm" />
				</view>
			</view> -->
				<view class="section">
					<text>地区</text>
					<pickerAddress @change="change">
						{{value}}
					</pickerAddress>
				</view>
				<view class="section">
					<text>详细地址</text>
					<textarea v-model="detailAddress" rows="3" maxlength="50" class="input"
						placeholder="详细地址、街道、门牌号等，5-50字"></textarea>
				</view>

			</view>
			<!-- 			<view v-if="showSetDefault" class="item">
				<view class="text">设为默认</view>
				<checkbox-group class="set-default">
					<label class="check-label">
						<checkbox class="check" color="#fff" :checked="Boolean(isDefault)" @tap="setDefaultAddr" />
					</label>
				</checkbox-group>
			</view> -->


			<view class="btn-box">
				<view class="keep btn" @tap="saveAddress">
					<text>保存收货地址</text>
				</view>
				<!-- <view v-if="addrId" class="del" @tap="handleShowPop">删除地址</view> -->
			</view>
		</view>
		<confirm-pop :show-pop="showPop" :pop-content="popContent" @handlePopCancel="popCancel"
			@handlePopConfirm="popConfirm" />

	</view>
</template>

<script>
	import pickerAddress from './pickerAddress.vue'
	export default {

		data() {
			return {
				userdata: {
					token: '',
					openId: '',
				},
				addrId: 0,
				showPicker: false,
				addrIds: [],
				recipientName: '',
				recipientPhone: '',
				province: '',
				city: '',
				county: '',
				detailAddress: '',
				showSetDefault: false,
				isDefault: 0, // 是否为默认地址
				saveing: false, // 是否正在保存地址
				showPop: false,
				popContent: {
					title: '是否确定删除该地址？',
					content: '删除地址后将无法恢复， 请您慎重考虑'
				},
				value: "请选择地区"
			}
		},
		methods: {

			/**
			 * 默认地址复选框切换
			 */
			setDefaultAddr() {
				const flag = Boolean(!this.isDefault)
				this.isDefault = flag ? 1 : 0
			},

			/**
			 * 显示弹窗
			 */
			handleShowPop(addrId) {
				this.showPop = true
			},

			/**
			 * 弹窗取消
			 */
			popCancel() {
				this.showPop = false
			},
			/**
			 * 弹窗确认
			 */
			popConfirm() {
				this.delAddress()
			},

			saveAddress() {
				// 数据校验
				if (!this.recipientName.trim()) {
					uni.showToast({
						title: '请输入收件人姓名',
						icon: 'none',
						mask: true
					})
					return
				}
				if (this.recipientName.length < 2) {
					uni.showToast({
						title: '收件人姓名需在2到20个字符之间',
						icon: 'none',
						mask: true
					})
					return
				}

				if (!this.detailAddress.trim() || this.detailAddress.length < 5) {
					uni.showToast({
						title: '请输入字数在5-50之间的详细地址',
						icon: 'none',
						mask: true
					})
					return
				}

				if (this.saveing) {
					return
				}
				this.saveing = true
				// 保存地址
				if (this.addrId) {
					this.$myRequest({
						url: '/user/editAddress',
						method: 'PUT',
						header: {
							Authorization: this.userdata.token,
						},
						data: {
							userAddressId: this.addrId,
							detailAddress: this.detailAddress,
							province: this.province,
							city: this.city,
							county: this.county,
							openId: this.userdata.openId,
							recipientName: this.recipientName,
							recipientPhone: this.recipientPhone
						},
					}).then(res => {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							mask: true
						})

						setTimeout(() => {
							// uni.navigateTo({
							// 	url:'/pages/myaddresslist/myaddresslist'
							// })
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 上一页
							uni.navigateBack({
								success: function() {
									beforePage.onLoad(); // 执行上一页的onLoad方法
								}
							})
							this.saveing = false
						}, 1200)
					}).catch(err => {
						console.log(err);
					})

				} else {
					this.$myRequest({
						url: '/user/addAddress',
						// method: this.addrId ? 'PUT' : 'POST',
						method: 'POST',
						header: {
							Authorization: this.userdata.token,
							// 'content-type': 'application/x-www-form-urlencoded',
						},
						data: {
							userAddressId: this.addrId,
							detailAddress: this.detailAddress,
							province: this.province,
							city: this.city,
							county: this.county,
							openId: this.userdata.openId,
							recipientName: this.recipientName,
							recipientPhone: this.recipientPhone
						},
					}).then(res => {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							mask: true
						})

						setTimeout(() => {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 上一页
							uni.navigateBack({
								success: function() {
									beforePage.onLoad(); // 执行上一页的onLoad方法
								}
							})
							this.saveing = false
						}, 1200)
					}).catch(err => {
						console.log(err);
					})


				}


			},

			/**
			 * 根据地址id获取地址信息
			 */
			getAddressById() {
				this.$myRequest({
					url: '/user/getAddressById',
					method: 'POST',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						addressId: this.addrId,
						openId: this.userdata.openId
					},
				}).then(res => {
					let data = res.data.data
					this.province = data.province,
					this.city = data.city,
					this.county = data.county,
					this.detailAddress = data.detailAddress
					this.recipientName = data.recipientName
					this.recipientPhone = data.recipientPhone
					this.value = `${data.province}${data.city}${data.county}`;
				}).catch(err => {
					console.log(err);
				})

			},
			async getStorage() {
				const openId = uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.openId = openId
				// console.log(openId)
				this.userdata.token = token
			},
			change(value) {
				this.province = value.data[0];
				this.city = value.data[1];
				this.county = value.data[2];

				console.log('选中的省份：', this.province);
				console.log('选中的城市：', this.city);
				console.log('选中的地区：', this.county);

				this.value = `${this.province}${this.city}${this.county}`;
			},


		},
		onLoad: function(options) {
			// console.log(options,'option');
			this.getStorage()
			if (options.addrId) {
				this.addrId = options.addrId
				this.getAddressById()
				console.log(this.addrId, 'addr');
			}
		},

		components: {
			pickerAddress
		},


	};
</script>
<style>
	@import "./myaddress-edit.css";
</style>